*{
    margin: 0;
    padding: 0;
}

html,body{
    background: #dadcdd;
}

/* 字体图标 */
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
 }

/* 头部 */
.head{
    width: 100%;
    background: aquamarine;
    height: 60px;
    position: fixed;
    top: 0;
    z-index: 2;
}
/* 头部两侧图片 */
.header_main>.Cheader_bg>.Cheader>.Cheader_left>img:nth-of-type(1) {
    position: absolute;
    top: 0px;
    left: -230px;
    z-index: -1;
}
.header_main>.Cheader_bg>.Cheader>.Cheader_right>img:nth-of-type(1) {
    position: absolute;
    top: 0px;
    right: -160px;
    z-index: 0;
}
.header_main>.Cheader_bg>.Cheader {
    background: #ECF2F7;
}
.header_main>.Cheader_bg>.Cheader>.Cheader_right>.touxiang {
    position: relative;
    z-index: 1;
}

/* 头部固定 */
.Head{
    position: fixed;
    top: 0;
    z-index: 100;
}

/* 除了头部以外 的容器 */
.container{ 
    width: 100%;
    height: 100%;
    margin-top: 60px;
    position: relative;
    /* margin-left: 84px; */
}

/* 侧边栏 */
/* 侧边栏的点击按钮 */
.container>.right{
    width: 22px;
    height: 80px;
    background-color: #2d2e36;
    position: fixed;
    left: 38px;
    top: 50%;
    /* margin-top: -80px; */
    border-radius: 20px;
    z-index: 100;
    cursor: pointer;
}
.container>.right>.nav{
    width: 48px;
    height: 100%;
    position: fixed;
    top: 60px;
    left: 0;
    background-color: #2d2e36;
}
.container>.right>.nav>.old>li{
    list-style: none;
    height: 80px;
    color: white;
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
}
/* li内容重新排列 */
.container>.right>.nav>.new{
    width: 240px;
    list-style: none;
    display: none;
    font-size: 12px;
    color: #666666;
    overflow: scroll;
    height: 100%;
}
/* 第一块 */
.container>.right>.nav>.new>li>.one>li{
    width: 100%;
    height: 48px;
    line-height: 48px;
    list-style: none;
}

.container>.right>.nav>.new>li>ul>li{
    width: 30%;
    height: 30px;
    line-height: 38px;
    float: left;
    margin-right: 2%;
    list-style: none;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
}

/* 字体图标 */
.ziti{
    font-size: 20px;
    /* margin-right: 20px; */
}
.ziti1{
    font-size: 20px;
    margin-right: 10px;
}


/* 侧边栏按钮 */
.container>.right>img{
    width: 15px;
    height: 15px;
    margin-left: 5px;
    margin-top: 30px;
}


/* 斗鱼推荐 */
.container>.selection{
    margin-bottom: 40px;
    height: 304px;
    width: 100%;
    /* background: indianred; */
    padding-left: 84px;
    box-sizing: border-box;
}

/* 斗鱼推荐的文字内容 在线直播的文字导航*/
.text{
    padding-top: 10px;
    min-height: 34px;
    display: inline-block;
    height: 54px;
    width: 100%;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}

/* 换一换 */
.container>.selection>.text>.change{
    text-align: center;
    line-height: 28px;
    background: white;
    border-radius: 20px;
    color: #666666;
    padding: 2px 4px;
    cursor: pointer;
}

/* 斗鱼推荐的视频区 */
.container>.selection>.content{
    height: 240px; 
    width: 100%;
    position: relative;
    overflow: hidden;
}

.container>.selection>.content>ul{
    height: 240px;
    width: 100%;
    /* overflow: hidden; */
    position:absolute;
}

.container>.selection>.content>ul>li{
    list-style: none;
    width: 264px;
    height: 230px;
    float: left;
    margin-right: 40px;
    margin-bottom: 40px;
    list-style: none;
    background:white;
    border-radius: 10px;
    cursor: pointer;
}

/* 图片 */
.container>.selection>.content>ul>li>img{
    width: 100%;
    height: 164px;
    border-radius: 10px 10px 0 0;
}
/* 头像 */
.container>.selection>.content>ul>li>.logo{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: none;
    margin-left: 6px;
}
/* 没滑动时第二行文字前面的小图标 */
.container>.selection>.content>ul>li>.hide>.touxiang,.container>.selection>.content>ul>li>.three>.hot{
    width: 20px;
    height: 20px;
    position: relative;
    top: 4px;
}
/* 直播的标题 */
.container>.selection>.content>ul>li>.one{
    line-height: 24px;
    font-size: 14px;
    width: 100%;
    height: 24px;
    display: inline-block;
   padding: 0 10px;
    box-sizing: border-box;
}
.container>.selection>.content>ul>li>.one>.left{
    float: left;
}
.container>.selection>.content>ul>li>.one>.right{
    float: right;
}
/* 鼠标滑过时改变关注的人数 */
.container>.selection>.content>ul>li>.hide{
    font-size: 12px;
    color: #666666;
    line-height: 28px;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
    left: 15px;
}
.container>.selection>.content>ul>li>.hide>span{
    position: absolute;
    top: 0px;
    left: 30px;
}

/* 观看人数 */
.container>.selection>.content>ul>li>.three{
    float: right;
    color: #666666;
    margin-right: 15px;
    font-size: 12px;
    margin-top: -30px;
}
/* three滑动时触发的事件 */
.t{
    position: absolute;
    left: 40px;
}
/* 关注 */
.container>.selection>.content>ul>li>.guanzhu{
    float: right;
    background: #FF5D23;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    display: none;
    color: white;
    border-radius: 20px;
    font-size: 14px;
    margin-top: -30px;
    margin-right: 30px;
}
/* 斗鱼推荐的视频滑过时li会放大一倍 */
.big{
    transform: scale(1.1);
    transition: all 1s;
}


/* 在线直播 */
.container>.online{
    width: 100%;
    padding-left: 84px;
    box-sizing: border-box;
    position: relative;
    /* height: 5310px;
    overflow: hidden; */
}

/* 在线直播的文字导航 */
.container>.online>.text>.one{
    float: left;
    margin-left: 140px;
    margin-top: -42px;
    position: absolute;
}

/* 在线直播导航栏固定 */
.Text{
    position: fixed;
    top: 60px;
    left: 48px;
    background: white;
    /* height: 110px; */
    z-index: 1;
}
/* 导航栏列表 */
.container>.online>.text>.one>li{
    list-style: none;
    width: 75px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: white;
    border-radius: 20px;
    float: left;
    margin-right: 20px;
    color: #666666;
    font-size: 14px;
    border: 1px solid #666666;
    cursor: pointer;
}
/* 类名为all的li标签样式 */
.container>.online>.text>.one>.all{
    background:#FF5D23;
    color:white;
    width: 80px;
    height: 34px;
    line-height: 34px;
}
/* 图片 */
.container>.online>.text>.one>li>img{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    right: 190px;
}

/* 点击下拉按钮时出现li */
.container>.online>.text>.one>li>.two{
    position: absolute;
    left: 0px;
    top: 60px;
    display: none;
    list-style: none;
}
.container>.online>.text>.one>li>.two>li{
    list-style: none;
    width: 75px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: white;
    border-radius: 20px;
    float: left;
    margin-right: 20px;
    color: #666666;
    font-size: 14px;
    border: 1px solid #666666;
}

/* 滑过全部时触发的内容 */
.container>.online>.text>.one>li>.three{
    height: 50px;
    background: white;
    border-top: 3px solid #FF5D23;
    position: absolute;
    left: 0px;
    top: 60px;
    border-radius: 10px;
    display: none;
    z-index: 1;
}
.container>.online>.text>.one>li>.three>li{
    list-style: none;
    width: 75px;
    /* height: 50px; */
    line-height: 32px;
    text-align: center;
    border: 1px solid #f2f5df;
    border-radius: 20px;
    float: left;
    margin-right: 20px;
    color: #666666;
    font-size: 14px;
    margin-top: 7px;
}

/* 在线直播的视频区 */
.container>.online>.Content>ul>li{
    width: 264px;
    height: 255px;
    margin-right: 40px;
    margin-bottom: 40px;
    list-style: none;
    float: left;
    background: white;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}

/* 图片 */
.container>.online>.Content>ul>li>img{
    width: 100%;
    height: 164px;
    border-radius: 10px 10px;
    border-radius: 10px 10px 0 0;
}
/* 头像 */
.container>.online>.Content>ul>li>.logo{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: none;
    margin-left: 6px;
}
/* 没滑动时第二行文字前面的小图标 */
.container>.online>.Content>ul>li>.hide>.touxiang,.container>.online>.Content>ul>li>.three>.hot{
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
}
/* 直播的标题 */
.container>.online>.Content>ul>li>.one{
    line-height: 24px;
    font-size: 14px;
    width: 100%;
    height: 24px;
    display: inline-block;
   padding: 0 10px;
    box-sizing: border-box;
}
.container>.online>.Content>ul>li>.one>.left{
    float: left;
    width: 170px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.container>.online>.Content>ul>li>.one>.right{
    float: right;
}
/* 鼠标滑过时改变关注的人数 */
.container>.online>.Content>ul>li>.hide{
    font-size: 12px;
    color: #666666;
    line-height: 28px;
    padding: 0 -5px;
    box-sizing: border-box;
    position: relative;
    left: 6px;
}
.container>.online>.Content>ul>li>.hide>span{
    position: absolute;
    left: 35px;
}
/* 观看人数 */
.container>.online>.Content>ul>li>.three{
    float: right;
    color: #666666;
    margin-right: 15px;
    font-size: 12px;
    margin-top: -30px;
}
/* three滑动时触发的事件 */
.tt{
    position: absolute;
    left: 40px;
    bottom: 20px;
}
/* 关注 */
.container>.online>.Content>ul>li>.guanzhu{
    float: right;
    background: #FF5D23;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    display: none;
    color: white;
    border-radius: 20px;
    font-size: 14px;
    margin-top: -30px;
    margin-right: 30px;
}
/* 描述 */
.container>.online>.Content>ul>li>.miaosu{
    font-size: 14px;
    padding: 5px 8px;
    box-sizing: border-box;
}


/* 网游竞技的视频区 */
.container>.online>.Wang{
    display: none;
}
.container>.online>.Wang>ul>li{
    width: 264px;
    height: 255px;
    margin-right: 40px;
    margin-bottom: 40px;
    list-style: none;
    float: left;
    background: white;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}
/* 图片 */
.container>.online>.Wang>ul>li>img{
    width: 100%;
    height: 164px;
    border-radius: 10px 10px;
    border-radius: 10px 10px 0 0;
}
/* 头像 */
.container>.online>.Wang>ul>li>.logo{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: none;
    margin-left: 6px;
}
/* 没滑动时第二行文字前面的小图标 */
.container>.online>.Wang>ul>li>.hide>.touxiang,.container>.online>.Wang>ul>li>.three>.hot{
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
}
/* 直播的标题 */
.container>.online>.Wang>ul>li>.one{
    line-height: 24px;
    font-size: 14px;
    width: 100%;
    height: 24px;
    display: inline-block;
   padding: 0 10px;
    box-sizing: border-box;
}
.container>.online>.Wang>ul>li>.one>.left{
    float: left;
    width: 170px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.container>.online>.Wang>ul>li>.one>.right{
    float: right;
}
/* 鼠标滑过时改变关注的人数 */
.container>.online>.Wang>ul>li>.hide{
    font-size: 12px;
    color: #666666;
    line-height: 28px;
    padding: 0 -5px;
    box-sizing: border-box;
    position: relative;
    left: 6px;
}
.container>.online>.Wang>ul>li>.hide>span{
    position: absolute;
    left: 35px;
}

/* 观看人数 */
.container>.online>.Wang>ul>li>.three{
    float: right;
    color: #666666;
    margin-right: 15px;
    font-size: 12px;
    margin-top: -30px;
}
/* three滑动时触发的事件 */
.tt{
    position: absolute;
    left: 40px;
    bottom: 20px;
}
/* 关注 */
.container>.online>.Wang>ul>li>.guanzhu{
    float: right;
    background: #FF5D23;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    display: none;
    color: white;
    border-radius: 20px;
    font-size: 14px;
    margin-top: -30px;
    margin-right: 30px;
}



/* 单击竞技的视频区 */
.container>.online>.Danji{
    display: none;
}
.container>.online>.Danji>ul>li{
    width: 264px;
    height: 255px;
    margin-right: 40px;
    margin-bottom: 40px;
    list-style: none;
    float: left;
    background: white;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}
/* 图片 */
.container>.online>.Danji>ul>li>img{
    width: 100%;
    height: 164px;
    border-radius: 10px 10px;
    border-radius: 10px 10px 0 0;
}
/* 头像 */
.container>.online>.Danji>ul>li>.logo{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: none;
    margin-left: 6px;
}
/* 没滑动时第二行文字前面的小图标 */
.container>.online>.Danji>ul>li>.hide>.touxiang,.container>.online>.Danji>ul>li>.three>.hot{
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
}
/* 直播的标题 */
.container>.online>.Danji>ul>li>.one{
    line-height: 24px;
    font-size: 14px;
    width: 100%;
    height: 24px;
    display: inline-block;
   padding: 0 10px;
    box-sizing: border-box;
}
.container>.online>.Danji>ul>li>.one>.left{
    float: left;
    width: 170px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.container>.online>.Danji>ul>li>.one>.right{
    float: right;
    width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
}
/* 鼠标滑过时改变关注的人数 */
.container>.online>.Danji>ul>li>.hide{
    font-size: 12px;
    color: #666666;
    line-height: 28px;
    padding: 0 -5px;
    box-sizing: border-box;
    position: relative;
    left: 6px;
}
.container>.online>.Danji>ul>li>.hide>span{
    position: absolute;
    left: 35px;
}

/* 观看人数 */
.container>.online>.Danji>ul>li>.three{
    float: right;
    color: #666666;
    margin-right: 15px;
    font-size: 12px;
    margin-top: -30px;
}
/* three滑动时触发的事件 */
.tt{
    position: absolute;
    left: 40px;
    bottom: 20px;
}
/* 关注 */
.container>.online>.Danji>ul>li>.guanzhu{
    float: right;
    background: #FF5D23;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    display: none;
    color: white;
    border-radius: 20px;
    font-size: 14px;
    margin-top: -30px;
    margin-right: 30px;
}

/* 分页 */
.container>.page{
    margin-left: 42%;
}
.container>.page>ul>li{
    list-style: none;
    float: left;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* border: 1px solid #666666; */
    text-align: center;
    line-height: 30px;
    margin-right: 20px;
    background: white;
    cursor: pointer;
}

/* 分页切换 */
/* 在线直播的视频区 */
.container>.online>.Content1{
    display: none;
}
.container>.online>.Content1>ul>li{
    width: 264px;
    height: 255px;
    margin-right: 40px;
    margin-bottom: 40px;
    list-style: none;
    float: left;
    background: white;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}
/* 图片 */
.container>.online>.Content1>ul>li>img{
    width: 100%;
    height: 164px;
    border-radius: 10px 10px;
    border-radius: 10px 10px 0 0;
}
/* 头像 */
.container>.online>.Content1>ul>li>.logo{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: none;
    margin-left: 6px;
}
/* 没滑动时第二行文字前面的小图标 */
.container>.online>.Content1>ul>li>.hide>.touxiang,.container>.online>.Content1>ul>li>.three>.hot{
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
}
/* 直播的标题 */
.container>.online>.Content1>ul>li>.one{
    line-height: 24px;
    font-size: 14px;
    width: 100%;
    height: 24px;
    display: inline-block;
   padding: 0 10px;
    box-sizing: border-box;
}
.container>.online>.Content1>ul>li>.one>.left{
    float: left;
    width: 170px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.container>.online>.Content1>ul>li>.one>.right{
    float: right;
}
/* 鼠标滑过时改变关注的人数 */
.container>.online>.Content1>ul>li>.hide{
    font-size: 12px;
    color: #666666;
    line-height: 28px;
    padding: 0 -5px;
    box-sizing: border-box;
    position: relative;
    left: 6px;
}
.container>.online>.Content1>ul>li>.hide>span{
    position: absolute;
    left: 35px;
}
/* 观看人数 */
.container>.online>.Content1>ul>li>.three{
    float: right;
    color: #666666;
    margin-right: 15px;
    font-size: 12px;
    margin-top: -30px;
}
/* 关注 */
.container>.online>.Content1>ul>li>.guanzhu{
    float: right;
    background: #FF5D23;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    display: none;
    color: white;
    border-radius: 20px;
    font-size: 14px;
    margin-top: -30px;
    margin-right: 30px;
}
/* 描述 */
.container>.online>.Content1>ul>li>.miaosu{
    font-size: 14px;
    padding: 5px 8px;
    box-sizing: border-box;
}


/* 分页切换 */
/* 在线直播的视频区 */
.container>.online>.WangY{
    display: none;
}
.container>.online>.WangY>ul>li{
    width: 264px;
    height: 255px;
    margin-right: 40px;
    margin-bottom: 40px;
    list-style: none;
    float: left;
    background: white;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}
/* 图片 */
.container>.online>.WangY>ul>li>img{
    width: 100%;
    height: 164px;
    border-radius: 10px 10px;
    border-radius: 10px 10px 0 0;
}
/* 头像 */
.container>.online>.WangY>ul>li>.logo{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: none;
    margin-left: 6px;
}
/* 没滑动时第二行文字前面的小图标 */
.container>.online>.WangY>ul>li>.hide>.touxiang,.container>.online>.WangY>ul>li>.three>.hot{
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
}
/* 直播的标题 */
.container>.online>.WangY>ul>li>.one{
    line-height: 24px;
    font-size: 14px;
    width: 100%;
    height: 24px;
    display: inline-block;
   padding: 0 10px;
    box-sizing: border-box;
}
.container>.online>.WangY>ul>li>.one>.left{
    float: left;
    width: 170px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}
.container>.online>.WangY>ul>li>.one>.right{
    float: right;
}
/* 鼠标滑过时改变关注的人数 */
.container>.online>.WangY>ul>li>.hide{
    font-size: 12px;
    color: #666666;
    line-height: 28px;
    padding: 0 -5px;
    box-sizing: border-box;
    position: relative;
    left: 6px;
}
.container>.online>.WangY>ul>li>.hide>span{
    position: absolute;
    left: 35px;
}
/* 观看人数 */
.container>.online>.WangY>ul>li>.three{
    float: right;
    color: #666666;
    margin-right: 15px;
    font-size: 12px;
    margin-top: -30px;
}
/* 关注 */
.container>.online>.WangY>ul>li>.guanzhu{
    float: right;
    background: #FF5D23;
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    display: none;
    color: white;
    border-radius: 20px;
    font-size: 14px;
    margin-top: -30px;
    margin-right: 30px;
}